import React, { useState } from "react";

// isMounted 用于记录是否已挂载（是否是首次渲染）

let isMounted = false;

function PersonalInfoComponent() {

  // 定义变量的逻辑不变

  let name, age, career, setName, setCareer;



  // 这里追加对 isMounted 的输出，这是一个 debug 性质的操作

  console.log("isMounted is", isMounted);

  // 这里追加 if 逻辑：只有在首次渲染（组件还未挂载）时，才获取 name、age 两个状态

  if (!isMounted) {

    // eslint-disable-next-line
    [name, setName] = useState("修言");

    // eslint-disable-next-line
    [age] = useState("99");



    // if 内部的逻辑执行一次后，就将 isMounted 置为 true（说明已挂载，后续都不再是首次渲染了）

    isMounted = true;

  }



  // 对职业信息的获取逻辑不变

  [career, setCareer] = useState("我是一个前端，爱吃小熊饼干");

  // 这里追加对 career 的输出，这也是一个 debug 性质的操作

  console.log("career", career, name);

  // UI 逻辑的改动在于，name和age成了可选的展示项，若值为空，则不展示

  return (

    <div className="personalInfo">

      <p>姓名：{name}</p> 

      {age ? <p>年龄：{age}</p> : null}

      <p>职业：{career}</p>

      <button

        onClick={() => {

          setName("秀妍");

        }}

      >

        修改姓名

      </button>

    </div>

  );

}

export default PersonalInfoComponent;
